<template>
  <el-container style="height: 100vh;">
    <!-- 顶部 -->
    <el-header height="60px" class="header">
      <div class="header-left">
        <h1 class="system-title">环卫系统</h1>
      </div>
      <div class="header-right">
        <el-dropdown trigger="click">
          <span class="user-dropdown">
            <i class="el-icon-user"></i>
            <span class="username">{{ username }}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>用户详情</el-dropdown-item>
            <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>

    <!-- 主体结构 -->
    <el-container>
      <el-aside width="220px" class="sidebar">
        <el-menu
          :default-active="activeMenu"
          background-color="#2d3a4b"
          text-color="#bfcbd9"
          active-text-color="#ffd04b"
          @select="handleMenuSelect"
          unique-opened
          router
        >
          <el-menu-item index="home">
            <i class="el-icon-s-home"></i>
            <span>主页面</span>
          </el-menu-item>
          <el-submenu index="user-management">
            <template #title>
              <i class="el-icon-user-solid"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item index="user-list">用户列表</el-menu-item>
            <el-menu-item index="user-data">数据分析</el-menu-item>
          </el-submenu>
          <el-menu-item index="toilet">
            <i class="el-icon-office-building"></i>
            <span>公厕管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-main class="main-content">
        <router-view v-if="$route.meta.keepAlive" />
        <component :is="currentView" v-else />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import HomeContent from '@/components/HomeContent.vue'
import Toilet from '@/components/Toilet.vue'

export default {
  name: "Home",
  components: {
    HomeContent,
    Toilet
  },
  data() {
    return {
      username: '',
      activeMenu: 'home',
      currentView: 'HomeContent'
    }
  },
  created() {
    this.updateActiveMenu()
    const userInfo = JSON.parse(localStorage.getItem('user'))
    if (userInfo && userInfo.username) {
      this.username = userInfo.username
    } else {
      this.username = '访客'
    }
  },
  watch: {
    $route() {
      this.updateActiveMenu()
    }
  },
  methods: {
    logout() {
      localStorage.removeItem('user')
      this.$router.push('/login')
    },
    handleMenuSelect(key) {
      this.activeMenu = key
      switch (key) {
        case 'home':
          this.currentView = 'HomeContent'
          this.$router.push('/home')
          break
        case 'toilet':
          this.currentView = 'Toilet'
          this.$router.push('/home/toilet')
          break
        default:
          this.currentView = 'HomeContent'
          this.$router.push('/home')
      }
    },
    updateActiveMenu() {
      const path = this.$route.path
      if (path.includes('toilet')) {
        this.activeMenu = 'toilet'
        this.currentView = 'Toilet'
      } else {
        this.activeMenu = 'home'
        this.currentView = 'HomeContent'
      }
    }
  }
}
</script>

<style scoped>
/* 原有样式保持不变 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #324157;
  padding: 0 24px;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.header-left .system-title {
  font-size: 22px;
  letter-spacing: 2px;
  user-select: none;
}

.header-right {
  display: flex;
  align-items: center;
}

.user-dropdown {
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  user-select: none;
}

.user-dropdown .username {
  margin: 0 6px;
  font-weight: 500;
}

.sidebar {
  background-color: #2d3a4b;
  color: #bfcbd9;
  border-right: none;
}

.main-content {
  background-color: #f5f7fa;
  padding: 24px;
  min-height: calc(100vh - 60px);
  overflow-y: auto;
  border-radius: 4px;
}

.el-menu-vertical-demo .el-menu-item i,
.el-menu-vertical-demo .el-submenu__title i {
  margin-right: 10px;
  font-size: 18px;
}
</style>
